import React, { Component } from 'react'
import { SearchBar } from 'antd-mobile'
import localStore from '@/utils/store'
// 导入项目的配置
import { historyLimit } from '@/config/site'

import { FormContainer } from '../style'
import Histories from './Histories'
import _ from 'lodash'

class Form extends Component {
  constructor(props) {
    super(props)
    // 进行节流处理
    this.onChange = _.throttle(this.onChange, 1000)
  }

  state = {
    // 先读取本地存储中的数据
    histoies: localStore.get('histoies', [])
  }

  onSubmit = value => {
    let histoies = this.state.histoies
    histoies.unshift(value)
    // 搜索记录只记录对应的记录数
    // this.state.histoies = histoies.slice(0, historyLimit)
    this.state.histoies = histoies.slice(0, process.env.REACT_APP_HISTORYLIMT)
    // 写入到本地存储中
    localStore.set('histoies', this.state.histoies)
    // 通知视图更新
    this.setState({})
  }

  cleanData() {
    this.setState({ histoies: [] }, () => {
      localStore.remove('histoies')
    })
  }

  // onChange = _.throttle(value => {
  //   console.log(value)
  // }, 3000)
  onChange = value => {
    // console.log(value)
    // 进行ajax请求，返回数据，更新视图
  }

  render() {
    // 当前环境判断
    // console.log(process.env.NODE_ENV);
    // console.log(process.env.REACT_APP_HISTORYLIMT);

    return (
      <FormContainer>
        <SearchBar placeholder="请输入搜索的关键词" maxLength={20} onSubmit={this.onSubmit} onChange={this.onChange} />
        <hr />
        <Histories data={this.state.histoies} cleanData={this.cleanData.bind(this)} />
      </FormContainer>
    )
  }
}

export default Form
